<template>
    <div class="Sys-content-box">
        <!--添加一级区域-->
        <div class="sys-content-head clear">
            <button class="add-btn" @click="addAera1"><span class="iconfont">+</span>添加{{configtypeMap[`${configtype}`].addTitle}}</button>


        </div>
        <template>
            <el-table
                    :data="showData"
                    border
                    style="width: 100%">
             <!--   <el-table-column
                        prop="property_type_sort"
                        label="编号"
                        width="80"
                        align="center"
                >
                </el-table-column>-->
                <el-table-column
                        :label="configtypeMap[`${configtype}`].table1colTitle"
                        width="180"
                        align="center"
                >
                    <template slot-scope="scope">
                        <span class="color-item">{{scope.row.property_type_name}}</span><span>({{scope.row.labelList.length}})</span>

                    </template>
                </el-table-column>
                <el-table-column
                        :label="configtypeMap[`${configtype}`].table2colTitle"
                        width="980"
                >
                    <template slot-scope="scope">
                        <el-tag v-for="area in scope.row.labelList"  type="info">{{area.label_name}}    <span v-if='deltagvisible' class="del-tag" @click="deltag(area)">x</span></el-tag>

                    </template>
                </el-table-column>
                <el-table-column label="操作"  prop="children"   width="130">
                    <template slot-scope="scope" >
                        <el-button @click="editArea12(scope.row)" type="text" size="small" title="批量增/删/修改">编辑</el-button>  <!--添加2级区域-->

                        <el-button v-if='!deltagvisible' type="text" size="small" @click="deletearea2()">删除块</el-button> <el-button v-if='deltagvisible' type="text" size="small" @click="quitdeletearea2()">退出删除模式</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!--添加通用-->

            <SysPropertyDraw
                    :visible="peraddDrawVisible"
                    :initstate="peraddDrawVisible"
                    :propertyNum="selectAreaNum"
                    :typetitle="configtypeMap.Property"
                    :nowtype="configtype"
                    :drawUrl="nowUrl"
                    @onclose="closeAddDraw(arguments)"
            >
            </SysPropertyDraw>

        <SysConfigDel
                :form="delItem"
                :title="delDialogTitle"
                :visible="delFormVisile"
                :nowtype="configtype"
                :drawUrl="nowUrl"
                @onclose="closedeldia(arguments)"
        >
        </SysConfigDel>
    </div>
</template>
<script>
    /*添加弹框引入*/

    import SysPropertyDraw  from '../components/SysPerAddDraw'
    import SysConfigDel  from '../components/SysConfigDel'
    export default {
        name: "SysPropertyPage",

        components:{

            SysConfigDel,
            SysPropertyDraw,

        },
        props:['configtype'],
        data() {
            return {
                //搜索
                serach:{
                    property_type_id:'',
                    laber_name:'',
                },
                alltypedata:[
                    {property_type_id:1,property_type_name:'住宅'},
                    {property_type_id:2,property_type_name:'写字楼'},
                    {property_type_id:3,property_type_name:'商铺'},
                ],

//标签内容map
                configtypeMap:{
                    Property:{
                        addTitle:'标签',
                        table1colTitle:'物业类型',
                        table2colTitle:'标签'
                    },
                }
                ,
                /*添加弹框的数据*/
                peraddDrawVisible: false,
                selectAreaNum:1,
                /*区域表格数据接受后端返回的已分页*/
                showData:[],
//删除组件
                delDialogTitle: "",
                delDialogTitleMap: {
                        area1DelTile:'物业',
                        area2DelTile:'标签',
                },
                //修改子栏目
                addDialogTitle:'',
                //
                editTagvisible:false,
                //是否显示删除标签的图标
                deltagvisible:false,
                delFormVisile:false,
                delItem:{},
                //接口表
                nowUrl:{
                    geturl:'/label/queryLabel',
                    delurl:'/label/delLabel',
                    addurl:'/label/addLabel',
                    editurl:'/label/updateLabel',
                }
            };
        },
        methods: {


            closedeldia(e) {
                if (e[0]) {
                    //重新获取区块信息
                    this.getAllData()
                } else {
                    this.$message({
                        type: "info",
                        message: "取消操作",
                    });
                }
                this.delFormVisile = false;
            },
            //打开删除标签
            deletearea2(){
                this.editTagvisible=false
                this.deltagvisible=true
            },
            quitdeletearea2(){
                this.deltagvisible=false
            },
            //删除标签
            deltag(item){
                //请求
                this.delDialogTitle = this.delDialogTitleMap.area2DelTile;
                this.delFormVisile = true;
                this.delItem = { ...item };
                // console.log('删除标签')
                // console.log(this.delItem)
            },

            editArea12(item){
                //显示
                this.peraddDrawVisible=true

                this.selectAreaNum=item.property_type_id
                // console.log('选中了某个物业类型')
                // console.log(this.selectAreaNum)
            },
            //添加区域配置弹框
            addAera1(){
                this.peraddDrawVisible=true;
                this.selectAreaNum=1
            },
            //添加块
            closeAddDraw(e){
                this.peraddDrawVisible=false
                if (!e[0]){
                    this.$message({
                        type:'info',
                        message:'取消操作'
                    })
                }else {
                    this.getAllData()
                }

            },
            getAllData(){
               /* this.showData=propertyData;*/
                this.axios({
                    url:'/label/queryLabel',
                    method:'get',
                    // params:{property_type_id:1}
                }).then(data=> {
                    // console.log('特色标签')
                    // console.log(data);
                    this.showData=data.data.data;
                    // console.log()
                    // console.log(this.showData);
                    // console.log(this.showData[0].property_type_name)
                })
            },


            //查询
        /*    serchConfig(){
                console.log(this.serach)
                if (this.serach.property_type_id===''){
                    this.showData.forEach(item=>{
                        if (item.label_name.indexOf(this.serach.laber_name)>0){
                            this.serach.select_label_id
                        }
                    })
                }else {

                }

            }*/
        },
        created() {
              this.getAllData()
        }

    }
</script>

<style lang="less">

    .Sys-content-box{
        .serach-select{
           .el-input--suffix{
                width: 200px;
            }
        }
        .el-pagination{
            position: absolute;

            margin: -40px 20px 40px;
        }
        .sys-content-head{

            margin: 0;
            >button{
                float: left;
            }
            >div.serach-input{
                float: right;
                .el-input.serch-text-input{
                    width: 30%;
                    margin: 0 20px;
                }
            }

        }

        .el-tag {

            cursor: pointer;
            background-color: rgba(255, 225, 205, 0.23);
            margin:5px 10px;
            transition: all .2s;
            &:hover{
                background-color: #ff9d2b;
                color: white;
                transform: scale(1.1);
            }
        }
        .del-tag{
            padding: 0 10px;
        }
        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }
        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
        .color-item{
            color: chocolate;
        }
        .el-table{
            padding-bottom: 100px;

        }
    }


</style>